<template>
	<div id="express_fee">
		<el-form :inline="true" size="medium">
			<el-form-item>
				<el-select placeholder="选择仓库" v-model="params.storeId" clearable @change="getSheetList('list')">
					<el-option :label="item.name" :value="item.id" v-for="(item, index) in goodsStoreList"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-select
					placeholder="选择面单"
					v-model="params.expressSheetId"
					:no-data-text="!params.storeId ? '请先选择仓库' : '无数据'"
					clearable
					@change="search"
				>
					<el-option
						v-for="(item, index) in sheetList" :key="index"
						:label="selectExpressType(item.expressStatus) + ' - ' + item.shipperName +' ( '+item.company+' )'"
						:value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="search">搜索</el-button>
				<el-button @click="dialogVisible = true">添加</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="list" v-loading="loading" stripe>
			<el-table-column label="id" prop="id" align="center"></el-table-column>
			<el-table-column label="类型" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.other_type === 1">自有仓库</span>
					<span v-if="scope.row.other_type === 2">爱代发</span>
					<span v-if="scope.row.other_type === 3">就代发</span>
					<span v-if="scope.row.other_type === 4">瑶瑶</span>
					<span v-if="scope.row.other_type === 5">星辰</span>
					<span v-if="scope.row.other_type === 6">海淘</span>
					<span v-if="scope.row.other_type === 7">代发发</span>
				</template>
			</el-table-column>
			<el-table-column label="面单" prop="expressSheet_id" align="center" min-width="200">
				<template slot-scope="scope">
					{{scope.row.shipper_name}}-{{selectExpressType(scope.row.express_status)}}
				</template>
			</el-table-column>
			<el-table-column label="所属仓库" align="center">
				<template slot-scope="scope">
					<span v-for="item in goodsStoreList" v-if="item.id == scope.row.store_id">{{item.name}}</span>
				</template>
			</el-table-column>
			<el-table-column label="成本/元" prop="cost" align="center"></el-table-column>
			<el-table-column label="最大重量/kg" prop="max_weight" align="center"></el-table-column>
			<el-table-column label="备注" prop="remark" align="center"></el-table-column>
			<el-table-column label="创建时间" prop="create_time" align="center">
				<template slot-scope="scope">
					{{$moment(scope.row.create_time).format('Y-MM-DD HH:mm')}}
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="text" @click="setData(scope.row)">修改</el-button>
					<el-button type="text" class="error" @click="del(scope.row.id)" >删除</el-button>
					<!-- <el-button type="text" class="error" @click="del(scope.row.id)" v-if="scope.row.otherType==1">删除</el-button> -->
					<!-- <el-button type="text" @click="aKeySyncCost(scope.row.id)" :loading="formLoading">一键同步租户成本</el-button> -->
				</template>
			</el-table-column>
		</el-table>

		<el-pagination
			class="page"
			background
			@size-change="handleSizeChange"
			@current-change="getList"
			:current-page.sync="params.pageNo"
			:page-sizes="[10, 20, 50, 100]"
			:page-size="params.pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total">
		</el-pagination>

		<el-dialog
			:title="formData.id ? '修改': '添加'"
			:visible.sync="dialogVisible"
			width="500px"
			center
			:before-close="handleClose"
			:close-on-click-modal="false">
			<el-form :model="formData" :rules="rules" ref="formData" label-width="110px">
				<el-form-item label="选择仓库" prop="storeId">
					<el-select placeholder="选择仓库" v-model="formData.storeId" clearable @change="getSheetList('form')" style="width: 100%;" :disabled="(formData.otherType && formData.otherType!=1)?true:false">
						<el-option :label="item.name" :value="item.id.toString()" v-for="(item, index) in goodsStoreList"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="选择面单" prop="expressSheetId">
					<el-select
						placeholder="请选择面单"
						v-model="formData.expressSheetId"
						style="width: 100%;" :no-data-text="!formData.storeId ? '请先选择仓库' : '无数据'" :disabled="(formData.otherType && formData.otherType!=1)?true:false">
						<el-option
							:label="selectExpressType(item.express_status) + ' - ' + item.shipper_name +' ( '+item.company+' )'"
							:value="item.id.toString()"
							v-for="(item, index) in sheetList"
							:key="index">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="成本" prop="cost">
					<el-input v-model="formData.cost" placeholder="请输入快递成本" :disabled="(formData.otherType && formData.otherType!=1)?true:false"></el-input>
				</el-form-item>
				<el-form-item label="租户默认成本" prop="tenantCost">
					<el-input v-model="formData.tenantCost" placeholder="请输入租户默认快递成本"></el-input>
				</el-form-item>
				<el-form-item label="最大重量" prop="maxWeight">
					<el-input v-model="formData.maxWeight" placeholder="请输入最大重量值" :disabled="(formData.otherType && formData.otherType!=1)?true:false"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="formData.remark" placeholder="标记备注"></el-input>
				</el-form-item>
			</el-form>
			<div class="align-center">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="write" :loading="formLoading">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					pageNo: 1,
					pageSize: 10,
					isCount: true,
					storeId: '',
					expressSheetId: '',
				},
				list: [],
				total: 0,
				loading: false,
				formLoading: false,
				selectData: [],
				dialogVisible: false,
				formData: {
					storeId: '',
					expressSheetId: '',
					maxWeight: '',
					cost: '',
					tenantCost: '',
					remark: ''
				},
				goodsStoreList: [],
				sheetList: [],
				rules: {
					storeId: {
						message: '请选择仓库', required: true, tirgger: 'change'
					},
					expressSheetId:{
						message: '请选择面单', required: true, tirgger: 'change'
					},
					cost: {
						required: true, trigger: 'blur', validator: (rule, value, callback)=>{
							if(!value){
								callback('请输入快递成本')
							}else if(!this.$common.isMoney(value)){
								callback('金额格式不正确')
							}else{
								callback()
							}
						}
					},
					tenantCost: {
						required: true, trigger: 'blur', validator: (rule, value, callback)=>{
							if(!value){
								callback('请输入租户默认快递成本')
							}else if(!this.$common.isMoney(value)){
								callback('金额格式不正确')
							}else{
								callback()
							}
						}
					},
					maxWeight: {
						required: true, trigger: 'blur', validator: (rule, value, callback)=>{
							if(!value){
								callback('请输入最大重量范围')
							}else if(!this.$common.isMoney(value)){
								callback('重量数值格式不正确')
							}else{
								callback()
							}
						}
					}
				}
			};
		},

		watch: {},

		create() {},

		mounted() {
			this.getList();
			this.getStore();
		},

		methods: {
			handleClose(done){
				this.reset()
				done();
			},

			handleSizeChange(value) {
				this.params.pageSize = value
				this.search()
			},

			search(){
				this.params.pageNo = 1
				this.params.isCount = true
				this.getList();
			},

			getList() {
				this.loading = true
				this.$request.post({
					url: '/ReportApi/admin/expressfeelist',
					params: this.params,
					success: result =>{
						this.list = result[0]
						if(this.params.isCount){
							this.params.isCount = false
							this.total = result[1]
						}
					},
					finally: ()=>{
						this.loading = false
					}
				})
			},

			setData(data){
				this.formData.storeId = data.store_id.toString()
				this.getSheetList('form')
				this.formData.expressSheetId = data.express_sheet_id.toString()
				this.formData.maxWeight = data.max_weight
				this.formData.cost = data.cost
				this.formData.tenantCost = data.tenant_cost
				this.formData.remark = data.remark
				this.formData.id = data.id
				this.formData.otherType = data.other_type
				this.dialogVisible = true
			},

			write(){
				this.$refs['formData'].validate((valid) => {
					if(valid){
						if(this.formLoading){
						 	return;
						 }
						this.formLoading = true
						var url = '/ReportApi/admin/' + (this.formData.id ? 'expressfeeupdate' : 'expressfeeadd')
						this.$request.post({
							url,
							params: this.formData,
							success: result => {
								this.$message.success('操作成功')
								this.dialogVisible = false
								this.reset()
								this.getList()
							},
							finally: ()=>{
								this.formLoading = false
							}
						})
					}
				})
			},

			del(id){
				this.$confirm('确认删除?', '提示').then(() => {
					this.$request.post({
						url: '/ReportApi/admin/expressfeedel',
						params: {
							id
						},
						success: () => {
							this.$message.success('操作成功')
							if (this.params.pageNo > 1 && this.list.length < 2) {
								this.params.pageNo--
							}
							this.getList();
						}
					})
				})
			},

			getStore() {
				this.$request.post({
					closeErrInfo: true,
					closeCodeInfo: true,
					url: '/ReportApi/admin/expressfeealllist',
					success: result => {
						this.goodsStoreList = result
					}
				})
			},


			getSheetList(type){
				if(!this.params.storeId && type == 'list'){
					this.sheetList = []
					this.params.expressSheetId = ''
					this.search()
					return;
				}else if(!this.formData.storeId && type == 'form'){
					this.sheetList = []
					this.formData.expressSheetId = ''
					return;
				}
				let id
				if(type == 'list'){
					id = this.params.storeId
				}else{
					id = this.formData.storeId
				}
				this.$request.post({
					url: '/ReportApi/admin/expresssheetalllist',
					params: {
						storeId: id
					},
					success: result =>{
						this.sheetList = result
						if(type == 'list'){
							this.search();
						}
					}
				})
			},

			selectStore(storeId) {
				if (!this.goodsStoreList.length) {
					return;
				}
				return this.goodsStoreList[this.goodsStoreList.findIndex(item => item.id == storeId)].name
			},

			selectSheet(expressSheetId) {
				if (!this.sheetList.length) {
					return;
				}
				return this.sheetList[this.sheetList.findIndex(item => item.id == expressSheetId)]
			},

			selectExpressType(expressStatus){
				switch(expressStatus){
					case 1:
						return "通用电子面单";
					case 2:
						return "菜鸟电子面单";
					case 3:
						return "拼多多面单";
					case 4:
						return "无界面单";
					default:
						return "其他面单";
				}
			},

			reset(){
				for(var key in this.formData){
					this.formData[key] = ''
				}
			},

			//一键同步租户成本
			// aKeySyncCost(id){
			// 	this.$confirm('确认同步所有租户该快递费用成本?', '提示').then(() => {
			// 		if(this.formLoading){
			// 			return;
			// 		}
			// 		this.formLoading = true
			// 		this.$request.post({
			// 			url: 'ad/sysExpressFee/aKeySyncCost',
			// 			params: {
			// 				id
			// 			},
			// 			success: () => {
			// 				this.$message.success('操作成功')

			// 			},
			// 			finally: ()=>{
			// 				this.formLoading = false
			// 			}
			// 		})
			// 	})
			// }
		},

		beforeDestroy() {}
	}
</script>

<style>

</style>

<style lang="scss" scoped>
	.page{
		text-align: right;
		margin-top: 20px;
	}
</style>
